<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>IconFont Demo</title>
  <link rel="shortcut icon" href="https://gtms04.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe613;</span>
                <div class="name">__a-flow</div>
                <div class="code-name">&amp;#xe613;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe614;</span>
                <div class="name">__a-finish</div>
                <div class="code-name">&amp;#xe614;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe615;</span>
                <div class="name">__a-stopflow</div>
                <div class="code-name">&amp;#xe615;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe616;</span>
                <div class="name">__a-stop</div>
                <div class="code-name">&amp;#xe616;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe617;</span>
                <div class="name">__ deviceset</div>
                <div class="code-name">&amp;#xe617;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe618;</span>
                <div class="name">__camera</div>
                <div class="code-name">&amp;#xe618;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe619;</span>
                <div class="name">__close</div>
                <div class="code-name">&amp;#xe619;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61a;</span>
                <div class="name">__BLUETOOTH02</div>
                <div class="code-name">&amp;#xe61a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61b;</span>
                <div class="name">__CANNON01</div>
                <div class="code-name">&amp;#xe61b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61c;</span>
                <div class="name">__BLUETOOTH01</div>
                <div class="code-name">&amp;#xe61c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61d;</span>
                <div class="name">__CANNON02</div>
                <div class="code-name">&amp;#xe61d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61e;</span>
                <div class="name">__daily</div>
                <div class="code-name">&amp;#xe61e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61f;</span>
                <div class="name">__device</div>
                <div class="code-name">&amp;#xe61f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe620;</span>
                <div class="name">__download</div>
                <div class="code-name">&amp;#xe620;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe621;</span>
                <div class="name">__grid</div>
                <div class="code-name">&amp;#xe621;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe622;</span>
                <div class="name">__edit</div>
                <div class="code-name">&amp;#xe622;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe623;</span>
                <div class="name">__HDMI01</div>
                <div class="code-name">&amp;#xe623;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe624;</span>
                <div class="name">__delete</div>
                <div class="code-name">&amp;#xe624;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe625;</span>
                <div class="name">__files</div>
                <div class="code-name">&amp;#xe625;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe626;</span>
                <div class="name">__direct</div>
                <div class="code-name">&amp;#xe626;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe627;</span>
                <div class="name">__home</div>
                <div class="code-name">&amp;#xe627;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe628;</span>
                <div class="name">__LINEIN01</div>
                <div class="code-name">&amp;#xe628;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe629;</span>
                <div class="name">__HDMI02</div>
                <div class="code-name">&amp;#xe629;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62a;</span>
                <div class="name">__import-05</div>
                <div class="code-name">&amp;#xe62a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62b;</span>
                <div class="name">__import-28</div>
                <div class="code-name">&amp;#xe62b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62c;</span>
                <div class="name">__LINEIN02</div>
                <div class="code-name">&amp;#xe62c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62d;</span>
                <div class="name">__plan</div>
                <div class="code-name">&amp;#xe62d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62e;</span>
                <div class="name">__record</div>
                <div class="code-name">&amp;#xe62e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62f;</span>
                <div class="name">__meeting</div>
                <div class="code-name">&amp;#xe62f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe630;</span>
                <div class="name">__reset</div>
                <div class="code-name">&amp;#xe630;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe631;</span>
                <div class="name">__NET01</div>
                <div class="code-name">&amp;#xe631;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe632;</span>
                <div class="name">__NET02</div>
                <div class="code-name">&amp;#xe632;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe633;</span>
                <div class="name">__SDI02</div>
                <div class="code-name">&amp;#xe633;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe634;</span>
                <div class="name">__sigg-code</div>
                <div class="code-name">&amp;#xe634;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe635;</span>
                <div class="name">__setup</div>
                <div class="code-name">&amp;#xe635;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe636;</span>
                <div class="name">__SDI01</div>
                <div class="code-name">&amp;#xe636;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe637;</span>
                <div class="name">__scene</div>
                <div class="code-name">&amp;#xe637;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe638;</span>
                <div class="name">__select</div>
                <div class="code-name">&amp;#xe638;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe639;</span>
                <div class="name">__update</div>
                <div class="code-name">&amp;#xe639;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63a;</span>
                <div class="name">__wait</div>
                <div class="code-name">&amp;#xe63a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63b;</span>
                <div class="name">__sign-user</div>
                <div class="code-name">&amp;#xe63b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63c;</span>
                <div class="name">__signup</div>
                <div class="code-name">&amp;#xe63c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63d;</span>
                <div class="name">__USB02</div>
                <div class="code-name">&amp;#xe63d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63e;</span>
                <div class="name">__USB01</div>
                <div class="code-name">&amp;#xe63e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63f;</span>
                <div class="name">__wifi</div>
                <div class="code-name">&amp;#xe63f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe642;</span>
                <div class="name">hc-logo</div>
                <div class="code-name">&amp;#xe642;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe643;</span>
                <div class="name">__meetingset</div>
                <div class="code-name">&amp;#xe643;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe644;</span>
                <div class="name">__refresh</div>
                <div class="code-name">&amp;#xe644;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe645;</span>
                <div class="name">__a-play</div>
                <div class="code-name">&amp;#xe645;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe646;</span>
                <div class="name">__devicemanage</div>
                <div class="code-name">&amp;#xe646;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe648;</span>
                <div class="name">one-related</div>
                <div class="code-name">&amp;#xe648;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe649;</span>
                <div class="name">search</div>
                <div class="code-name">&amp;#xe649;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64b;</span>
                <div class="name">one-server</div>
                <div class="code-name">&amp;#xe64b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64c;</span>
                <div class="name">one-tenant</div>
                <div class="code-name">&amp;#xe64c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64e;</span>
                <div class="name">one-leadin</div>
                <div class="code-name">&amp;#xe64e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64f;</span>
                <div class="name">one-infor</div>
                <div class="code-name">&amp;#xe64f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe647;</span>
                <div class="name">logo</div>
                <div class="code-name">&amp;#xe647;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64a;</span>
                <div class="name">one-power</div>
                <div class="code-name">&amp;#xe64a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe650;</span>
                <div class="name">alert-delete</div>
                <div class="code-name">&amp;#xe650;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe651;</span>
                <div class="name">topography</div>
                <div class="code-name">&amp;#xe651;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe652;</span>
                <div class="name">poweroff</div>
                <div class="code-name">&amp;#xe652;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe653;</span>
                <div class="name">one-user</div>
                <div class="code-name">&amp;#xe653;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe640;</span>
                <div class="name">one-client</div>
                <div class="code-name">&amp;#xe640;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe641;</span>
                <div class="name">one-tenant</div>
                <div class="code-name">&amp;#xe641;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe654;</span>
                <div class="name">one-server</div>
                <div class="code-name">&amp;#xe654;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe655;</span>
                <div class="name">indicator</div>
                <div class="code-name">&amp;#xe655;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe656;</span>
                <div class="name">new-yuan</div>
                <div class="code-name">&amp;#xe656;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64d;</span>
                <div class="name">_play</div>
                <div class="code-name">&amp;#xe64d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe658;</span>
                <div class="name">link</div>
                <div class="code-name">&amp;#xe658;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe657;</span>
                <div class="name">ss_stop</div>
                <div class="code-name">&amp;#xe657;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe659;</span>
                <div class="name">ss_play</div>
                <div class="code-name">&amp;#xe659;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65a;</span>
                <div class="name">ss_share</div>
                <div class="code-name">&amp;#xe65a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65b;</span>
                <div class="name">ss_control</div>
                <div class="code-name">&amp;#xe65b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65c;</span>
                <div class="name">react</div>
                <div class="code-name">&amp;#xe65c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65d;</span>
                <div class="name">__oo-link</div>
                <div class="code-name">&amp;#xe65d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65e;</span>
                <div class="name">__oo-mute</div>
                <div class="code-name">&amp;#xe65e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65f;</span>
                <div class="name">__oo-nodiscuss</div>
                <div class="code-name">&amp;#xe65f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe660;</span>
                <div class="name">__qq-media</div>
                <div class="code-name">&amp;#xe660;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe661;</span>
                <div class="name">__oo-linkbreak</div>
                <div class="code-name">&amp;#xe661;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe662;</span>
                <div class="name">__oo-sound</div>
                <div class="code-name">&amp;#xe662;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe663;</span>
                <div class="name">__qq-web</div>
                <div class="code-name">&amp;#xe663;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe664;</span>
                <div class="name">__structure</div>
                <div class="code-name">&amp;#xe664;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe665;</span>
                <div class="name">__ss_stop</div>
                <div class="code-name">&amp;#xe665;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe666;</span>
                <div class="name">__qq-cloud</div>
                <div class="code-name">&amp;#xe666;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe667;</span>
                <div class="name">__ss-break</div>
                <div class="code-name">&amp;#xe667;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe668;</span>
                <div class="name">__save</div>
                <div class="code-name">&amp;#xe668;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe669;</span>
                <div class="name">__ss_control</div>
                <div class="code-name">&amp;#xe669;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66a;</span>
                <div class="name">__date</div>
                <div class="code-name">&amp;#xe66a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66b;</span>
                <div class="name">__apply-refuse</div>
                <div class="code-name">&amp;#xe66b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66c;</span>
                <div class="name">__nav_teach</div>
                <div class="code-name">&amp;#xe66c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66d;</span>
                <div class="name">__ss_play</div>
                <div class="code-name">&amp;#xe66d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66e;</span>
                <div class="name">__oo-discuss</div>
                <div class="code-name">&amp;#xe66e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66f;</span>
                <div class="name">__new-structure</div>
                <div class="code-name">&amp;#xe66f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe670;</span>
                <div class="name">__phonenumber</div>
                <div class="code-name">&amp;#xe670;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe671;</span>
                <div class="name">__ss_share</div>
                <div class="code-name">&amp;#xe671;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe672;</span>
                <div class="name">__email</div>
                <div class="code-name">&amp;#xe672;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe673;</span>
                <div class="name">__apply-pass</div>
                <div class="code-name">&amp;#xe673;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe674;</span>
                <div class="name">__movies</div>
                <div class="code-name">&amp;#xe674;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe675;</span>
                <div class="name">__notice</div>
                <div class="code-name">&amp;#xe675;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe676;</span>
                <div class="name">__nav_serveset</div>
                <div class="code-name">&amp;#xe676;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe677;</span>
                <div class="name">__user-pic</div>
                <div class="code-name">&amp;#xe677;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe678;</span>
                <div class="name">__oo-looker</div>
                <div class="code-name">&amp;#xe678;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe679;</span>
                <div class="name">_one-export</div>
                <div class="code-name">&amp;#xe679;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67a;</span>
                <div class="name">__onlive</div>
                <div class="code-name">&amp;#xe67a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67b;</span>
                <div class="name">__ss-download</div>
                <div class="code-name">&amp;#xe67b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67c;</span>
                <div class="name">_高级配置</div>
                <div class="code-name">&amp;#xe67c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67d;</span>
                <div class="name">_画面配置</div>
                <div class="code-name">&amp;#xe67d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67e;</span>
                <div class="name">_声音配置</div>
                <div class="code-name">&amp;#xe67e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ae;</span>
                <div class="name">图标_视频配置</div>
                <div class="code-name">&amp;#xe6ae;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6af;</span>
                <div class="name">图标_内容配置</div>
                <div class="code-name">&amp;#xe6af;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b0;</span>
                <div class="name">图标_编码配置</div>
                <div class="code-name">&amp;#xe6b0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b1;</span>
                <div class="name">图标_推流配置</div>
                <div class="code-name">&amp;#xe6b1;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>兼容性最好，支持 IE6+，及所有现代浏览器。</li>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
      url('iconfont.woff2') format('woff2'),
      url('iconfont.woff') format('woff'),
      url('iconfont.ttf') format('truetype'),
      url('iconfont.svg#iconfont') format('svg');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icon-__a-flow"></span>
            <div class="name">
              __a-flow
            </div>
            <div class="code-name">.icon-__a-flow
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__a-finish"></span>
            <div class="name">
              __a-finish
            </div>
            <div class="code-name">.icon-__a-finish
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__a-stopflow"></span>
            <div class="name">
              __a-stopflow
            </div>
            <div class="code-name">.icon-__a-stopflow
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__a-stop"></span>
            <div class="name">
              __a-stop
            </div>
            <div class="code-name">.icon-__a-stop
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__deviceset"></span>
            <div class="name">
              __ deviceset
            </div>
            <div class="code-name">.icon-__deviceset
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__camera"></span>
            <div class="name">
              __camera
            </div>
            <div class="code-name">.icon-__camera
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__close"></span>
            <div class="name">
              __close
            </div>
            <div class="code-name">.icon-__close
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__BLUETOOTH"></span>
            <div class="name">
              __BLUETOOTH02
            </div>
            <div class="code-name">.icon-__BLUETOOTH
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__CANNON"></span>
            <div class="name">
              __CANNON01
            </div>
            <div class="code-name">.icon-__CANNON
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__BLUETOOTH1"></span>
            <div class="name">
              __BLUETOOTH01
            </div>
            <div class="code-name">.icon-__BLUETOOTH1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__CANNON1"></span>
            <div class="name">
              __CANNON02
            </div>
            <div class="code-name">.icon-__CANNON1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__daily"></span>
            <div class="name">
              __daily
            </div>
            <div class="code-name">.icon-__daily
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__device"></span>
            <div class="name">
              __device
            </div>
            <div class="code-name">.icon-__device
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__download"></span>
            <div class="name">
              __download
            </div>
            <div class="code-name">.icon-__download
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__grid"></span>
            <div class="name">
              __grid
            </div>
            <div class="code-name">.icon-__grid
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__edit"></span>
            <div class="name">
              __edit
            </div>
            <div class="code-name">.icon-__edit
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__HDMI"></span>
            <div class="name">
              __HDMI01
            </div>
            <div class="code-name">.icon-__HDMI
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__delete"></span>
            <div class="name">
              __delete
            </div>
            <div class="code-name">.icon-__delete
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__files"></span>
            <div class="name">
              __files
            </div>
            <div class="code-name">.icon-__files
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__direct"></span>
            <div class="name">
              __direct
            </div>
            <div class="code-name">.icon-__direct
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__home"></span>
            <div class="name">
              __home
            </div>
            <div class="code-name">.icon-__home
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__LINEIN"></span>
            <div class="name">
              __LINEIN01
            </div>
            <div class="code-name">.icon-__LINEIN
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__HDMI1"></span>
            <div class="name">
              __HDMI02
            </div>
            <div class="code-name">.icon-__HDMI1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__import-"></span>
            <div class="name">
              __import-05
            </div>
            <div class="code-name">.icon-__import-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__import-1"></span>
            <div class="name">
              __import-28
            </div>
            <div class="code-name">.icon-__import-1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__LINEIN1"></span>
            <div class="name">
              __LINEIN02
            </div>
            <div class="code-name">.icon-__LINEIN1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__plan"></span>
            <div class="name">
              __plan
            </div>
            <div class="code-name">.icon-__plan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__record"></span>
            <div class="name">
              __record
            </div>
            <div class="code-name">.icon-__record
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__meeting"></span>
            <div class="name">
              __meeting
            </div>
            <div class="code-name">.icon-__meeting
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__reset"></span>
            <div class="name">
              __reset
            </div>
            <div class="code-name">.icon-__reset
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__NET"></span>
            <div class="name">
              __NET01
            </div>
            <div class="code-name">.icon-__NET
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__NET1"></span>
            <div class="name">
              __NET02
            </div>
            <div class="code-name">.icon-__NET1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__SDI"></span>
            <div class="name">
              __SDI02
            </div>
            <div class="code-name">.icon-__SDI
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__sigg-code"></span>
            <div class="name">
              __sigg-code
            </div>
            <div class="code-name">.icon-__sigg-code
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__setup"></span>
            <div class="name">
              __setup
            </div>
            <div class="code-name">.icon-__setup
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__SDI1"></span>
            <div class="name">
              __SDI01
            </div>
            <div class="code-name">.icon-__SDI1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__scene"></span>
            <div class="name">
              __scene
            </div>
            <div class="code-name">.icon-__scene
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__select"></span>
            <div class="name">
              __select
            </div>
            <div class="code-name">.icon-__select
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__update"></span>
            <div class="name">
              __update
            </div>
            <div class="code-name">.icon-__update
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__wait"></span>
            <div class="name">
              __wait
            </div>
            <div class="code-name">.icon-__wait
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__sign-user"></span>
            <div class="name">
              __sign-user
            </div>
            <div class="code-name">.icon-__sign-user
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__signup"></span>
            <div class="name">
              __signup
            </div>
            <div class="code-name">.icon-__signup
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__USB"></span>
            <div class="name">
              __USB02
            </div>
            <div class="code-name">.icon-__USB
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__USB1"></span>
            <div class="name">
              __USB01
            </div>
            <div class="code-name">.icon-__USB1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__wifi"></span>
            <div class="name">
              __wifi
            </div>
            <div class="code-name">.icon-__wifi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-hc-logo"></span>
            <div class="name">
              hc-logo
            </div>
            <div class="code-name">.icon-hc-logo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__meetingset"></span>
            <div class="name">
              __meetingset
            </div>
            <div class="code-name">.icon-__meetingset
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__refresh"></span>
            <div class="name">
              __refresh
            </div>
            <div class="code-name">.icon-__refresh
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__a-play"></span>
            <div class="name">
              __a-play
            </div>
            <div class="code-name">.icon-__a-play
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__devicemanage"></span>
            <div class="name">
              __devicemanage
            </div>
            <div class="code-name">.icon-__devicemanage
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-one-related"></span>
            <div class="name">
              one-related
            </div>
            <div class="code-name">.icon-one-related
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-search"></span>
            <div class="name">
              search
            </div>
            <div class="code-name">.icon-search
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-one-server"></span>
            <div class="name">
              one-server
            </div>
            <div class="code-name">.icon-one-server
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-one-tenant"></span>
            <div class="name">
              one-tenant
            </div>
            <div class="code-name">.icon-one-tenant
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-one-leadin"></span>
            <div class="name">
              one-leadin
            </div>
            <div class="code-name">.icon-one-leadin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-one-infor"></span>
            <div class="name">
              one-infor
            </div>
            <div class="code-name">.icon-one-infor
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-logo"></span>
            <div class="name">
              logo
            </div>
            <div class="code-name">.icon-logo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-one-power"></span>
            <div class="name">
              one-power
            </div>
            <div class="code-name">.icon-one-power
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-alert-delete"></span>
            <div class="name">
              alert-delete
            </div>
            <div class="code-name">.icon-alert-delete
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-topography"></span>
            <div class="name">
              topography
            </div>
            <div class="code-name">.icon-topography
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-poweroff"></span>
            <div class="name">
              poweroff
            </div>
            <div class="code-name">.icon-poweroff
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-one-user"></span>
            <div class="name">
              one-user
            </div>
            <div class="code-name">.icon-one-user
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-one-client1"></span>
            <div class="name">
              one-client
            </div>
            <div class="code-name">.icon-one-client1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-one-tenant1"></span>
            <div class="name">
              one-tenant
            </div>
            <div class="code-name">.icon-one-tenant1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-one-server1"></span>
            <div class="name">
              one-server
            </div>
            <div class="code-name">.icon-one-server1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-indicator"></span>
            <div class="name">
              indicator
            </div>
            <div class="code-name">.icon-indicator
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-new-yuan"></span>
            <div class="name">
              new-yuan
            </div>
            <div class="code-name">.icon-new-yuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-_play"></span>
            <div class="name">
              _play
            </div>
            <div class="code-name">.icon-_play
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-link1"></span>
            <div class="name">
              link
            </div>
            <div class="code-name">.icon-link1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ss_stop"></span>
            <div class="name">
              ss_stop
            </div>
            <div class="code-name">.icon-ss_stop
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ss_play"></span>
            <div class="name">
              ss_play
            </div>
            <div class="code-name">.icon-ss_play
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ss_share"></span>
            <div class="name">
              ss_share
            </div>
            <div class="code-name">.icon-ss_share
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ss_control"></span>
            <div class="name">
              ss_control
            </div>
            <div class="code-name">.icon-ss_control
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-react"></span>
            <div class="name">
              react
            </div>
            <div class="code-name">.icon-react
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__oo-link"></span>
            <div class="name">
              __oo-link
            </div>
            <div class="code-name">.icon-__oo-link
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__oo-mute"></span>
            <div class="name">
              __oo-mute
            </div>
            <div class="code-name">.icon-__oo-mute
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__oo-nodiscuss"></span>
            <div class="name">
              __oo-nodiscuss
            </div>
            <div class="code-name">.icon-__oo-nodiscuss
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__qq-media"></span>
            <div class="name">
              __qq-media
            </div>
            <div class="code-name">.icon-__qq-media
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__oo-linkbreak"></span>
            <div class="name">
              __oo-linkbreak
            </div>
            <div class="code-name">.icon-__oo-linkbreak
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__oo-sound"></span>
            <div class="name">
              __oo-sound
            </div>
            <div class="code-name">.icon-__oo-sound
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__qq-web"></span>
            <div class="name">
              __qq-web
            </div>
            <div class="code-name">.icon-__qq-web
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__structure"></span>
            <div class="name">
              __structure
            </div>
            <div class="code-name">.icon-__structure
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__ss_stop"></span>
            <div class="name">
              __ss_stop
            </div>
            <div class="code-name">.icon-__ss_stop
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__qq-cloud"></span>
            <div class="name">
              __qq-cloud
            </div>
            <div class="code-name">.icon-__qq-cloud
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__ss-break"></span>
            <div class="name">
              __ss-break
            </div>
            <div class="code-name">.icon-__ss-break
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__save"></span>
            <div class="name">
              __save
            </div>
            <div class="code-name">.icon-__save
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__ss_control"></span>
            <div class="name">
              __ss_control
            </div>
            <div class="code-name">.icon-__ss_control
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__date"></span>
            <div class="name">
              __date
            </div>
            <div class="code-name">.icon-__date
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__apply-refuse"></span>
            <div class="name">
              __apply-refuse
            </div>
            <div class="code-name">.icon-__apply-refuse
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__nav_teach"></span>
            <div class="name">
              __nav_teach
            </div>
            <div class="code-name">.icon-__nav_teach
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__ss_play"></span>
            <div class="name">
              __ss_play
            </div>
            <div class="code-name">.icon-__ss_play
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__oo-discuss"></span>
            <div class="name">
              __oo-discuss
            </div>
            <div class="code-name">.icon-__oo-discuss
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__new-structure"></span>
            <div class="name">
              __new-structure
            </div>
            <div class="code-name">.icon-__new-structure
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__phonenumber"></span>
            <div class="name">
              __phonenumber
            </div>
            <div class="code-name">.icon-__phonenumber
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__ss_share"></span>
            <div class="name">
              __ss_share
            </div>
            <div class="code-name">.icon-__ss_share
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__email"></span>
            <div class="name">
              __email
            </div>
            <div class="code-name">.icon-__email
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__apply-pass"></span>
            <div class="name">
              __apply-pass
            </div>
            <div class="code-name">.icon-__apply-pass
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__movies"></span>
            <div class="name">
              __movies
            </div>
            <div class="code-name">.icon-__movies
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__notice"></span>
            <div class="name">
              __notice
            </div>
            <div class="code-name">.icon-__notice
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__nav_serveset"></span>
            <div class="name">
              __nav_serveset
            </div>
            <div class="code-name">.icon-__nav_serveset
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__user-pic"></span>
            <div class="name">
              __user-pic
            </div>
            <div class="code-name">.icon-__user-pic
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__oo-looker"></span>
            <div class="name">
              __oo-looker
            </div>
            <div class="code-name">.icon-__oo-looker
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-_one-export"></span>
            <div class="name">
              _one-export
            </div>
            <div class="code-name">.icon-_one-export
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__onlive"></span>
            <div class="name">
              __onlive
            </div>
            <div class="code-name">.icon-__onlive
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-__ss-download"></span>
            <div class="name">
              __ss-download
            </div>
            <div class="code-name">.icon-__ss-download
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-_gaojipeizhi"></span>
            <div class="name">
              _高级配置
            </div>
            <div class="code-name">.icon-_gaojipeizhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-_huamianpeizhi"></span>
            <div class="name">
              _画面配置
            </div>
            <div class="code-name">.icon-_huamianpeizhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-_shengyinpeizhi"></span>
            <div class="name">
              _声音配置
            </div>
            <div class="code-name">.icon-_shengyinpeizhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tubiao_shipinpeizhi"></span>
            <div class="name">
              图标_视频配置
            </div>
            <div class="code-name">.icon-tubiao_shipinpeizhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tubiao_neirongpeizhi"></span>
            <div class="name">
              图标_内容配置
            </div>
            <div class="code-name">.icon-tubiao_neirongpeizhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tubiao_bianmapeizhi"></span>
            <div class="name">
              图标_编码配置
            </div>
            <div class="code-name">.icon-tubiao_bianmapeizhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tubiao_tuiliupeizhi"></span>
            <div class="name">
              图标_推流配置
            </div>
            <div class="code-name">.icon-tubiao_tuiliupeizhi
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>兼容性良好，支持 IE8+，及所有现代浏览器。</li>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
          <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__a-flow"></use>
                </svg>
                <div class="name">__a-flow</div>
                <div class="code-name">#icon-__a-flow</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__a-finish"></use>
                </svg>
                <div class="name">__a-finish</div>
                <div class="code-name">#icon-__a-finish</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__a-stopflow"></use>
                </svg>
                <div class="name">__a-stopflow</div>
                <div class="code-name">#icon-__a-stopflow</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__a-stop"></use>
                </svg>
                <div class="name">__a-stop</div>
                <div class="code-name">#icon-__a-stop</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__deviceset"></use>
                </svg>
                <div class="name">__ deviceset</div>
                <div class="code-name">#icon-__deviceset</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__camera"></use>
                </svg>
                <div class="name">__camera</div>
                <div class="code-name">#icon-__camera</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__close"></use>
                </svg>
                <div class="name">__close</div>
                <div class="code-name">#icon-__close</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__BLUETOOTH"></use>
                </svg>
                <div class="name">__BLUETOOTH02</div>
                <div class="code-name">#icon-__BLUETOOTH</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__CANNON"></use>
                </svg>
                <div class="name">__CANNON01</div>
                <div class="code-name">#icon-__CANNON</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__BLUETOOTH1"></use>
                </svg>
                <div class="name">__BLUETOOTH01</div>
                <div class="code-name">#icon-__BLUETOOTH1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__CANNON1"></use>
                </svg>
                <div class="name">__CANNON02</div>
                <div class="code-name">#icon-__CANNON1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__daily"></use>
                </svg>
                <div class="name">__daily</div>
                <div class="code-name">#icon-__daily</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__device"></use>
                </svg>
                <div class="name">__device</div>
                <div class="code-name">#icon-__device</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__download"></use>
                </svg>
                <div class="name">__download</div>
                <div class="code-name">#icon-__download</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__grid"></use>
                </svg>
                <div class="name">__grid</div>
                <div class="code-name">#icon-__grid</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__edit"></use>
                </svg>
                <div class="name">__edit</div>
                <div class="code-name">#icon-__edit</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__HDMI"></use>
                </svg>
                <div class="name">__HDMI01</div>
                <div class="code-name">#icon-__HDMI</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__delete"></use>
                </svg>
                <div class="name">__delete</div>
                <div class="code-name">#icon-__delete</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__files"></use>
                </svg>
                <div class="name">__files</div>
                <div class="code-name">#icon-__files</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__direct"></use>
                </svg>
                <div class="name">__direct</div>
                <div class="code-name">#icon-__direct</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__home"></use>
                </svg>
                <div class="name">__home</div>
                <div class="code-name">#icon-__home</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__LINEIN"></use>
                </svg>
                <div class="name">__LINEIN01</div>
                <div class="code-name">#icon-__LINEIN</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__HDMI1"></use>
                </svg>
                <div class="name">__HDMI02</div>
                <div class="code-name">#icon-__HDMI1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__import-"></use>
                </svg>
                <div class="name">__import-05</div>
                <div class="code-name">#icon-__import-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__import-1"></use>
                </svg>
                <div class="name">__import-28</div>
                <div class="code-name">#icon-__import-1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__LINEIN1"></use>
                </svg>
                <div class="name">__LINEIN02</div>
                <div class="code-name">#icon-__LINEIN1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__plan"></use>
                </svg>
                <div class="name">__plan</div>
                <div class="code-name">#icon-__plan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__record"></use>
                </svg>
                <div class="name">__record</div>
                <div class="code-name">#icon-__record</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__meeting"></use>
                </svg>
                <div class="name">__meeting</div>
                <div class="code-name">#icon-__meeting</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__reset"></use>
                </svg>
                <div class="name">__reset</div>
                <div class="code-name">#icon-__reset</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__NET"></use>
                </svg>
                <div class="name">__NET01</div>
                <div class="code-name">#icon-__NET</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__NET1"></use>
                </svg>
                <div class="name">__NET02</div>
                <div class="code-name">#icon-__NET1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__SDI"></use>
                </svg>
                <div class="name">__SDI02</div>
                <div class="code-name">#icon-__SDI</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__sigg-code"></use>
                </svg>
                <div class="name">__sigg-code</div>
                <div class="code-name">#icon-__sigg-code</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__setup"></use>
                </svg>
                <div class="name">__setup</div>
                <div class="code-name">#icon-__setup</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__SDI1"></use>
                </svg>
                <div class="name">__SDI01</div>
                <div class="code-name">#icon-__SDI1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__scene"></use>
                </svg>
                <div class="name">__scene</div>
                <div class="code-name">#icon-__scene</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__select"></use>
                </svg>
                <div class="name">__select</div>
                <div class="code-name">#icon-__select</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__update"></use>
                </svg>
                <div class="name">__update</div>
                <div class="code-name">#icon-__update</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__wait"></use>
                </svg>
                <div class="name">__wait</div>
                <div class="code-name">#icon-__wait</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__sign-user"></use>
                </svg>
                <div class="name">__sign-user</div>
                <div class="code-name">#icon-__sign-user</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__signup"></use>
                </svg>
                <div class="name">__signup</div>
                <div class="code-name">#icon-__signup</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__USB"></use>
                </svg>
                <div class="name">__USB02</div>
                <div class="code-name">#icon-__USB</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__USB1"></use>
                </svg>
                <div class="name">__USB01</div>
                <div class="code-name">#icon-__USB1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__wifi"></use>
                </svg>
                <div class="name">__wifi</div>
                <div class="code-name">#icon-__wifi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-hc-logo"></use>
                </svg>
                <div class="name">hc-logo</div>
                <div class="code-name">#icon-hc-logo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__meetingset"></use>
                </svg>
                <div class="name">__meetingset</div>
                <div class="code-name">#icon-__meetingset</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__refresh"></use>
                </svg>
                <div class="name">__refresh</div>
                <div class="code-name">#icon-__refresh</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__a-play"></use>
                </svg>
                <div class="name">__a-play</div>
                <div class="code-name">#icon-__a-play</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__devicemanage"></use>
                </svg>
                <div class="name">__devicemanage</div>
                <div class="code-name">#icon-__devicemanage</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-one-related"></use>
                </svg>
                <div class="name">one-related</div>
                <div class="code-name">#icon-one-related</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-search"></use>
                </svg>
                <div class="name">search</div>
                <div class="code-name">#icon-search</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-one-server"></use>
                </svg>
                <div class="name">one-server</div>
                <div class="code-name">#icon-one-server</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-one-tenant"></use>
                </svg>
                <div class="name">one-tenant</div>
                <div class="code-name">#icon-one-tenant</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-one-leadin"></use>
                </svg>
                <div class="name">one-leadin</div>
                <div class="code-name">#icon-one-leadin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-one-infor"></use>
                </svg>
                <div class="name">one-infor</div>
                <div class="code-name">#icon-one-infor</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-logo"></use>
                </svg>
                <div class="name">logo</div>
                <div class="code-name">#icon-logo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-one-power"></use>
                </svg>
                <div class="name">one-power</div>
                <div class="code-name">#icon-one-power</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-alert-delete"></use>
                </svg>
                <div class="name">alert-delete</div>
                <div class="code-name">#icon-alert-delete</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-topography"></use>
                </svg>
                <div class="name">topography</div>
                <div class="code-name">#icon-topography</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-poweroff"></use>
                </svg>
                <div class="name">poweroff</div>
                <div class="code-name">#icon-poweroff</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-one-user"></use>
                </svg>
                <div class="name">one-user</div>
                <div class="code-name">#icon-one-user</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-one-client1"></use>
                </svg>
                <div class="name">one-client</div>
                <div class="code-name">#icon-one-client1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-one-tenant1"></use>
                </svg>
                <div class="name">one-tenant</div>
                <div class="code-name">#icon-one-tenant1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-one-server1"></use>
                </svg>
                <div class="name">one-server</div>
                <div class="code-name">#icon-one-server1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-indicator"></use>
                </svg>
                <div class="name">indicator</div>
                <div class="code-name">#icon-indicator</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-new-yuan"></use>
                </svg>
                <div class="name">new-yuan</div>
                <div class="code-name">#icon-new-yuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-_play"></use>
                </svg>
                <div class="name">_play</div>
                <div class="code-name">#icon-_play</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-link1"></use>
                </svg>
                <div class="name">link</div>
                <div class="code-name">#icon-link1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ss_stop"></use>
                </svg>
                <div class="name">ss_stop</div>
                <div class="code-name">#icon-ss_stop</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ss_play"></use>
                </svg>
                <div class="name">ss_play</div>
                <div class="code-name">#icon-ss_play</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ss_share"></use>
                </svg>
                <div class="name">ss_share</div>
                <div class="code-name">#icon-ss_share</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ss_control"></use>
                </svg>
                <div class="name">ss_control</div>
                <div class="code-name">#icon-ss_control</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-react"></use>
                </svg>
                <div class="name">react</div>
                <div class="code-name">#icon-react</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__oo-link"></use>
                </svg>
                <div class="name">__oo-link</div>
                <div class="code-name">#icon-__oo-link</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__oo-mute"></use>
                </svg>
                <div class="name">__oo-mute</div>
                <div class="code-name">#icon-__oo-mute</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__oo-nodiscuss"></use>
                </svg>
                <div class="name">__oo-nodiscuss</div>
                <div class="code-name">#icon-__oo-nodiscuss</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__qq-media"></use>
                </svg>
                <div class="name">__qq-media</div>
                <div class="code-name">#icon-__qq-media</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__oo-linkbreak"></use>
                </svg>
                <div class="name">__oo-linkbreak</div>
                <div class="code-name">#icon-__oo-linkbreak</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__oo-sound"></use>
                </svg>
                <div class="name">__oo-sound</div>
                <div class="code-name">#icon-__oo-sound</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__qq-web"></use>
                </svg>
                <div class="name">__qq-web</div>
                <div class="code-name">#icon-__qq-web</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__structure"></use>
                </svg>
                <div class="name">__structure</div>
                <div class="code-name">#icon-__structure</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__ss_stop"></use>
                </svg>
                <div class="name">__ss_stop</div>
                <div class="code-name">#icon-__ss_stop</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__qq-cloud"></use>
                </svg>
                <div class="name">__qq-cloud</div>
                <div class="code-name">#icon-__qq-cloud</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__ss-break"></use>
                </svg>
                <div class="name">__ss-break</div>
                <div class="code-name">#icon-__ss-break</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__save"></use>
                </svg>
                <div class="name">__save</div>
                <div class="code-name">#icon-__save</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__ss_control"></use>
                </svg>
                <div class="name">__ss_control</div>
                <div class="code-name">#icon-__ss_control</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__date"></use>
                </svg>
                <div class="name">__date</div>
                <div class="code-name">#icon-__date</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__apply-refuse"></use>
                </svg>
                <div class="name">__apply-refuse</div>
                <div class="code-name">#icon-__apply-refuse</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__nav_teach"></use>
                </svg>
                <div class="name">__nav_teach</div>
                <div class="code-name">#icon-__nav_teach</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__ss_play"></use>
                </svg>
                <div class="name">__ss_play</div>
                <div class="code-name">#icon-__ss_play</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__oo-discuss"></use>
                </svg>
                <div class="name">__oo-discuss</div>
                <div class="code-name">#icon-__oo-discuss</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__new-structure"></use>
                </svg>
                <div class="name">__new-structure</div>
                <div class="code-name">#icon-__new-structure</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__phonenumber"></use>
                </svg>
                <div class="name">__phonenumber</div>
                <div class="code-name">#icon-__phonenumber</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__ss_share"></use>
                </svg>
                <div class="name">__ss_share</div>
                <div class="code-name">#icon-__ss_share</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__email"></use>
                </svg>
                <div class="name">__email</div>
                <div class="code-name">#icon-__email</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__apply-pass"></use>
                </svg>
                <div class="name">__apply-pass</div>
                <div class="code-name">#icon-__apply-pass</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__movies"></use>
                </svg>
                <div class="name">__movies</div>
                <div class="code-name">#icon-__movies</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__notice"></use>
                </svg>
                <div class="name">__notice</div>
                <div class="code-name">#icon-__notice</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__nav_serveset"></use>
                </svg>
                <div class="name">__nav_serveset</div>
                <div class="code-name">#icon-__nav_serveset</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__user-pic"></use>
                </svg>
                <div class="name">__user-pic</div>
                <div class="code-name">#icon-__user-pic</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__oo-looker"></use>
                </svg>
                <div class="name">__oo-looker</div>
                <div class="code-name">#icon-__oo-looker</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-_one-export"></use>
                </svg>
                <div class="name">_one-export</div>
                <div class="code-name">#icon-_one-export</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__onlive"></use>
                </svg>
                <div class="name">__onlive</div>
                <div class="code-name">#icon-__onlive</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-__ss-download"></use>
                </svg>
                <div class="name">__ss-download</div>
                <div class="code-name">#icon-__ss-download</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-_gaojipeizhi"></use>
                </svg>
                <div class="name">_高级配置</div>
                <div class="code-name">#icon-_gaojipeizhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-_huamianpeizhi"></use>
                </svg>
                <div class="name">_画面配置</div>
                <div class="code-name">#icon-_huamianpeizhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-_shengyinpeizhi"></use>
                </svg>
                <div class="name">_声音配置</div>
                <div class="code-name">#icon-_shengyinpeizhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tubiao_shipinpeizhi"></use>
                </svg>
                <div class="name">图标_视频配置</div>
                <div class="code-name">#icon-tubiao_shipinpeizhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tubiao_neirongpeizhi"></use>
                </svg>
                <div class="name">图标_内容配置</div>
                <div class="code-name">#icon-tubiao_neirongpeizhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tubiao_bianmapeizhi"></use>
                </svg>
                <div class="name">图标_编码配置</div>
                <div class="code-name">#icon-tubiao_bianmapeizhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tubiao_tuiliupeizhi"></use>
                </svg>
                <div class="name">图标_推流配置</div>
                <div class="code-name">#icon-tubiao_tuiliupeizhi</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
